<template>
  <view class="emergency-page">
    <!-- 联系人信息 -->
    <view class="section">
      <view class="section-title">填写联系人信息</view>
      <view class="form-item">
        <text class="label">姓名：</text>
        <input
          class="input"
          v-model="contact.emergencyContact"
          placeholder="点击编辑"
        />
      </view>
      <view class="form-item">
        <text class="label">联系方式：</text>
        <input
          class="input"
          type="tel"
          v-model="contact.emergencyPhone"
          placeholder="点击编辑"
        />
      </view>
      <view class="form-item">
        <text class="label">地址：</text>
        <input
          class="input"
          v-model="contact.userLocation"
          placeholder="点击编辑"
        />
      </view>
    </view>
    <view class="section">
      <view class="section-title">请选择宠物</view>
      <view
        class=""
        style="height: 500rpx; overflow-y: scroll"
        v-if="list.length != 0"
      >
        <view
          class="hospital-item"
          v-for="(item, idx) in list"
          :key="idx"
          @click="btyn(item, idx)"
        >
          <image
            class="hospital-img"
            :src="item.img ? item.img : '/static/my/pet.png'"
          />
          <view class="hospital-name">{{ item.name }}</view>
          <!-- <view class="hospital-price">¥{{item.price}}元</view> -->

          <view class="">
            <image
              style="width: 40rpx; height: 40rpx; border-radius: 50%"
              :src="
                item.sel == true
                  ? '/static/activity/icon_yuan_dui.png'
                  : '/static/activity/icon_yuan.png'
              "
              mode=""
            ></image>
          </view>
        </view>
      </view>
      <view class="noCw" v-else>
        <view>暂无宠物</view>
        <view class="noCwBtn" @click="noCwBtn">去添加</view>
      </view>
    </view>

    <!-- 宠物信息 -->

    <!-- 支付方式 -->

    <!-- <view class="section pay-section">
			<view class="form-item pay-item">
				<text class="label">支付方式</text>
				<view v-model="payType"> 支付宝支付 <uni-icons type="right" size="14" color="#303030" /> </view>
			</view>
		</view> -->
    <view class="payImg" @click="openPayPopup">
      <view class="payImg-title">支付方式</view>
      <view class="payImg-selected">
        {{ selected.name ? selected.name : "请选择" }}
      </view>
      <uni-icons type="right" size="16" color="#707070"></uni-icons>
    </view>
    <!-- 底部确认按钮 -->
    <view class="footer">
      <button class="confirm-btn" @click="onSubmit">确认</button>
    </view>

    <PaySelectPopup
      :show="isPayPopupVisible"
      :defaultMethod="selectedPayMethod"
      @close="closePayPopup"
      @confirm="onPayMethodConfirm"
    />
  </view>
</template>

<script>
import PaySelectPopup from "@/components/PaySelectPopup.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: {
    PaySelectPopup,
  },
  data() {
    return {
      list: [],
      isPayPopupVisible: false,
      selected: {},
      contact: {
        emergencyContact: "",
        emergencyPhone: "",
        userLocation: "",
      },

      gender: ["公", "母"],
      genderIndex: null,

      payType: "alipay",
      upData: {},
      cwData: {},
    };
  },
  onLoad(e) {
    let dataString = e.estimatedCost;
    this.upData = JSON.parse(decodeURIComponent(dataString));
    this.init();
  },
  methods: {
    noCwBtn() {
      uni.navigateTo({
        url: "/pages/my/editPetProfile",
      });
    },
    btyn(item) {
      this.list.map((res) => {
        if (item.id == res.id) {
          res.sel = true;
          this.cwData = res;
        } else {
          res.sel = false;
        }
      });
    },
    init() {
      uni.app.post(
        "/pet/info/getInfos",
        {
          limit: 10,
          offset: 1,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          if (res.code == 2000) {
            this.list = res.data.records;
            // this.list.map(res => {
            // 	res.sel = false
            // })
            console.log(this.list, "this.list");
          }
        },
      );
    },
    pickerChange: function (e) {
      console.log(e, "jj ");
      this.genderIndex = e.detail.value;
      this.contact.petGender = e.detail.value;
    },
    submitOrder() {
      let that = this;
      // 余额支付
      if (this.selected.value == 4) {
      }
      const ids = this.cheakList.map((item) => item.id).join(",");
      uni.app.post(
        "/activity/order/consumptionPay",
        {
          id: this.id,
          payWay: this.selected.value,
          tradeInfo: ids,
          tradeNumber: this.cheakList.length,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          if (res.code == 2000) {
            uni.app.msg(res.message);
            setTimeout(() => {
              switch (this.selected.value) {
                case "1":
                  that.fn(res.data);
                  break;
                case "2":
                  that.fn(res.data);
                  break;
                case "4":
                  uni.navigateTo({
                    url: `/pages/hotspot/orderDetail?orderNo=${res.data.orderNo}`,
                  });
                  break;
              }
            }, 2000);
          }
        },
      );
    },

    onSubmit() {
      if (this.contact.emergencyContact == "") {
        this.ts("请填写紧急联系人姓名");
        return;
      } else if (this.contact.emergencyPhone == "") {
        this.ts("请填写紧急联系人电话");
        return;
      } else if (this.contact.userLocation == "") {
        this.ts("请填写紧急联系人地址");
        return;
      } else if (this.cwData && !this.cwData.id) {
        this.ts("请选择宠物信息");
        return;
      } else if (!this.selected.name) {
        this.ts("请选择支付方式");
        return;
      }
      this.contact.paymentMethod = this.selected.value;
      this.cwData.petAge = this.cwData.age;
      this.cwData.petGender = this.cwData.gender;
      this.cwData.petId = this.cwData.id;
      this.cwData.petName = this.cwData.name;

      let data = {
        userId: uni.getStorageSync("userId"),
        ...this.upData,
        ...this.contact,
        ...this.cwData,
      };
      this.pay(data);
    },
    pay(data) {
      uni.app.post("/pet/emergencyOrder/create", data, "json", "", (res) => {
        console.log(res, "res");
        if (res.code == 2000) {
          uni.app.msg(res.message);
          setTimeout(() => {
            switch (this.selected.value) {
              case "1":
                that.fn(res.data);
                break;
              case "2":
                that.fn(res.data);
                break;
              case "4":
                uni.navigateTo({
                  url: `/pages/hotspot/orderDetail?orderNo=${res.data.orderNo}`,
                });
                break;
            }
          }, 2000);
        }
      });
    },
    fn(data) {
      let ddd = {
        ...data,
        jumpUrl: "/pages/order/firstAidOrderInfo?id=" + data.id,
        paySource: "rescue",
      };
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = data;
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.aliPayForOrderStr(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.aliPayForOrderStr.postMessage(data);
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    ts(tit) {
      uni.showToast({
        title: tit,
        icon: "none",
      });
    },
    openPayPopup() {
      this.isPayPopupVisible = true;
    },
    closePayPopup() {
      this.isPayPopupVisible = false;
    },
    onPayMethodConfirm(method) {
      this.selected = method;

      this.isPayPopupVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.noCw {
  line-height: 60rpx;
  text-align: center;
  padding: 30rpx;
  .noCwBtn {
    width: 60%;
    line-height: 60rpx;
    text-align: center;
    background: #ff4d4f;
    margin: 20rpx auto;
    color: #fff;
    border-radius: 100rpx;
  }
}
.hospital-list {
  padding: 12px;
  margin-top: 40rpx;
  background: #fff;
  // border-bottom: 1px dashed #ccc;
}

.hospital-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.hospital-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.hospital-img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.hospital-name {
  flex: 1;
  font-size: 15px;
  color: #333;
}

.hospital-price {
  font-size: 14px;
  color: #888;
  margin-right: 10px;
}

.checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff;
}

.checkbox.checked {
  border-color: #ff4d4f;
  background: #ff4d4f;
  color: #fff;
}

.section1 {
  display: flex;
  justify-content: space-between;
}

.payImg {
  display: flex;
  height: 80rpx;
  padding: 0 20rpx 0 32rpx;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 0 20rpx;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;

  .payImg-title {
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
    line-height: 40rpx;
  }

  .payImg-selected {
    flex: 1;
    margin-right: 30rpx;
    text-align: end;
    font-weight: 400;
    font-size: 24rpx;
    color: #707070;
    line-height: 40rpx;
  }
}

.emergency-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.section {
  background: #fff;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0 24rpx;
}

.section-title {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f8f8f8;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;

  font-size: 28rpx;
}

.label {
  font-weight: 400;
  font-size: 24rpx;
  color: #303030;
  line-height: 40rpx;
}

.input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 28rpx;
  color: #333;
}

.picker-text {
  flex: 1;
  color: #333;
}

.pay-section {
  margin-top: 20rpx;
  padding-bottom: 0;
}

.pay-item {
  border-bottom: none;
  justify-content: space-between;
}

.pay-label {
  font-size: 28rpx;
  color: #333;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 0 40rpx 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.confirm-btn {
  width: 90%;
  height: 80rpx;
  background: #ff4d4f;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
}
</style>
